<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Listado de Validadores</title>

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/gen-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/mkv/jquery-ui.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/ui.jqgrid.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/makovo-style.css"
	type="text/css" />

<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-2.1.3.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/gen.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/inegi.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/ui/jquery.jqGrid.src.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/spin.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/auxiliares.js"></script>

<script type="text/javascript">
	$(document).ready(
			function() {
				if (validaSesion("${sessionScope.LoginMenu}"))
					document.location = "index.jsp";
				var mCall = new Gen.AjaxCall();
				var mUsers;
				// 						var mTemplate = "<table><tr><td>Domicilio:</td><td>{0}</td></tr></table>";

				$('#filter').click(function() {
					var init = $('#init_date').val();
					var end = $('#end_date').val();

					getValidators(init, end, refreshGrid);
				});

				$('#init_date,#end_date').datepicker(
						{
							changeMonth : true,
							changeYear : true,
							monthNames : [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto',
									'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ],
							monthNamesShort : [ 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov',
									'Dic' ],
							dayNames : [ 'Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado' ],
							dayNamesShort : [ 'Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb' ],
							dayNamesMin : [ 'Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá' ],
							yearRange : "1900:2000",
							dateFormat : 'yy/mm/dd'
						});

				$('#tblUsers').jqGrid({
					datatype : "local",
					height : "auto",
					width : 1000,
					caption : "Listado de Validadores",
					rowList : [ 30, 50, 100, 200 ],
					colNames : [ 'Nombre', 'Estado', 'Fecha de alta ', 'Teléfono' ],
					colModel : [ {
						name : 'name',
						index : 'name',
						width : 230,
						formatter : formatterFullName

					}, {
						name : 'idState',
						index : 'idState',
						width : 110,
						formatter : formatterState

					}, {
						name : 'phone',
						index : 'phone',
						width : 110,

					}, {
						name : 'enrollDate',
						index : 'enrollDate',
						width : 110,

					} ],
					subGrid : false,
					// 									subGridRowExpanded : function(subgrid_id, row_id) {
					// 										var row = findValue(mApplicants, "curp", row_id);
					// 										var temp = mTemplate.format(row.address.street + " " + row.address.extNum + " "
					// 												+ row.address.intNum + "<br/>" + row.address.state + " " + row.address.city
					// 												+ ", " + row.address.loc + "<br/>C.P.: " + row.address.cp + " <br/>");
					// 										$('#' + subgrid_id).append(temp);

					// 									},
					loadComplete : function(request) {
						// 										$('.continue').click(function() {
						// 											var id = this.id.split('_')[1];
						// 											navigateContinue(id);
						// 										});

						// 										$('.show-doc').click(function() {
						// 											var id = this.id.split('_')[1];
						// 											navigateDetails(id);
						// 										});
					}
				});

				function refreshGrid(data) {
					$('#tblUsers').jqGrid('clearGridData');
					$('#tblUsers').jqGrid('setGridParam', {
						data : data
					});
					$('#tblUsers').trigger('reloadGrid');
				}

				function formatterFullName(cellValue, options, rowObject) {
					return rowObject.name + " " + rowObject.lastName + " " + rowObject.secondLastName;
				}

				function formatterState(cellValue, options, rowObject) {
					return Inegi.states[cellValue - 1].name;
				}

				function getValidators(init, end, afterFunction) {
					showOverlay(true);
					mCall.post('ajax/GetValidatorList.action', {
						init : init,
						end : end
					}, function(a) {
						if (a != null)
							afterFunction(a.validators);

						hideOverlay();
					}, function(er) {
						hideOverlay();
					});
				}

				getValidators("", "", refreshGrid);
			});
</script>
</head>
<body>
	<div style="width: 1100px; margin: 0 auto">
		<form action="ajax/GetUser">
			<div class="headerMK">
				<div class="logo">
					<span class="hdTitulo">Sistema para Aplicación de Subsidio
						2015</span>
				</div>
				<div
					style="font-size: 0.26em; top: -50px; position: relative; width: 500px; float: right; text-align: right; padding-right: 10px">
					<i>${sessionScope.LoginNombre}</i><b><a
						href="/makovo/paginas/index.jsp"> - Cerrar Sesión</a></b>
				</div>
			</div>
		</form>
		<form action="ajax/GetUserList" style="width: 1100px; margin: 0 auto;">
			<div class="divContenido">
				<a href="<%=request.getContextPath()%>/paginas/menu.jsp">Regresar
					al menú</a> <br />
				<h3>Listado de Validadores</h3>
				<div style="padding-left: 100px">
					<table style="width: 100%">
						<tr>
							<td><span>Fecha inicio</span></td>
							<td><span>Fecha fin</span></td>
						</tr>
						<tr>
							<td><input class="t-box" t-box-type="date" id="init_date"></td>
							<td><input class="t-box" t-box-type="date" id="end_date"></td>
							<td style="width: 100px;"><button id="filter" type="button"
									class="t-btn medium hor-opening">Filtrar</button></td>
						</tr>
					</table>
				</div>

				<div style="width: 1000px; margin: 0px auto; padding: 2em;">
					<table id="tblUsers">
					</table>
				</div>
			</div>

		</form>
	</div>
</body>
</html>